h1{
font-family: keren.woff2;
  text-align: center;
  font-size:3em
  
}


@font-face{
  font-style: normal;
font-weight:normal
  font-family: 'keren.woff2';
  src: url('keren.woff2') format('woff2') 
}
  


body{
  background-color: rgba(64, 174, 243, 0.238);
}
div{
 background-color: antiquewhite;
    width: 150px
    
}
image{

    size: 45cm;
}


p{
    font-size: 30px  
    
}


body {
  margin: 0;

}

.slideshow-container {
  position: relative; /* כדי שהאלמנטים האבסולוטיים בתוכו יהיו ביחס אליו */
  width: 100%; /* או רוחב ספציפי שאתה רוצה */
  height: 100vh; /* או גובה ספציפי שאתה רוצה */
  display: flex; /* שימוש ב-Flexbox למרכוז */
  justify-content: center; /* מרכוז אופקי */
  align-items: center; /* מרכוז אנכי */
}

.slideshow-container img {
  max-width: 100%; /* התמונה לא תהיה רחבה יותר מהקונטיינר */
  max-height: 100%; /* התמונה לא תהיה גבוהה יותר מהקונטיינר */
  object-fit: contain; /* כדי שהתמונה תתאים לקונטיינר בלי לעוות פרופורציות */
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide:first-child {
  opacity: 1;
}

@keyframes slideshow {
  10% { opacity: 1; }
  50% { opacity: 1; } /* תיקנתי את הערך ל-1 */
  90% { opacity: 0; } /* הוספתי כדי שתהיה דעיכה */
}

.slide:nth-child(1) {
  animation: slideshow 9s infinite; /* הגדלתי את זמן האנימציה כדי שהשהייה תהיה מורגשת */
}

.slide:nth-child(2) {
  animation: slideshow 9s infinite 3s; /* השהייה של 3 שניות */
}

.slide:nth-child(3) { /* אם יש לך תמונה שלישית */
  animation: slideshow 9s infinite 6s; /* השהייה של 6 שניות */
}